﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        .layui-table th {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <table id="treetb"></table>
    </div>
    <script type="text/javascript">

        layui.config({
            base: '/layui/lay/modules/'  // 配置模块所在的目录
        }).use(['treeTable'], function () {
            var treeTable = layui.treeTable;
            //自定义验证规则
            parent.form.verify({
                menuName: function (value) {
                    if (value.length < 2) {
                        return '名称至少得2个字符';
                    }
                }
                , urlname: [/^[A-z]{3,22}$/, '必须为3-12位英文字符，且不能出现空格']
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });
            //console.log(treeTable);
            var insTb = treeTable.render({
                elem: '#treetb',
                toolbar: '#mytoolbar',
                text: {
                    none: '<div style="padding: 18px 0;">哎呀，一条数据都没有~</div>'
                },
                tree: {
                    iconIndex: 0,           // 折叠图标显示在第几列
                    isPidData: true,        // 是否是id、pid形式数据
                    idName: 'menuID',  // id字段名称
                    pidName: 'parentID'     // pid字段名称
                },
                cols: [
                    //[
                    //    { title: '只是想演示一个三级表头', colspan: 6 },
                    //    { field: 'menuUrl', title: '菜单地址', rowspan: 2 },
                    //],
                    [
                        { title: '菜单信息', colspan: 2 },
                        { title: '路由信息', colspan: 3 },
                        { title: "操作", singleLine: true, rowspan: 2, width: 180, templet: "#mytm" }
                    ],
                    [
                        //{ type: 'numbers' },
                        //{ type: 'checkbox' },
                        { field: 'menuName', title: '菜单名称',width: 160,},
                        { field: 'menuUrl', title: '菜单地址' },
                        { field: 'areaName', title: '区域<i class=\"layui-icon\">&#xe642;</i>', width: 160, edit: 'text' },
                        { field: 'controllerName', title: '控制器<i class=\"layui-icon\">&#xe642;</i>', width: 160, edit: 'text' },
                        { field: 'actionName', title: '动作方法<i class=\"layui-icon\">&#xe642;</i>', width: 160, edit: 'text' },
                        //{ checkbox: true, totalRowText: "合计", width: 40 }
                    ]
                ],
                reqData: function (data, callback) {
                    // 在这里写ajax请求，通过callback方法回调数据
                    $.get('/System/Menus/GetMenusAll', function (res) {
                        let d = JSON.parse(res);
                        if (d.code == 1) callback(d.data);
                        else callback(d.msg);
                    });
                }
            });

            // 监听单元格编辑事件
            treeTable.on('edit(treetb)', function (obj) {
                if (obj.data.parentID == 0) {
                    layer.tips('模块的路由无需设置！', $(this), { tips: [1, '#FF5722'] });
                    $(this).val("");
                    return false;
                }
                //console.log(obj);
                if (!/^[A-z]{3,12}$/.test(obj.value)) {
                    layer.tips('格式不正确,必须为3-12位英文字符', $(this), { tips: [1, '#FF5722'] });
                    return false;
                }
                var data = { id: obj.data.menuID, field: obj.field, value: obj.value };
                var menuUrl = obj.field == "areaName" ? "/" + obj.value + "/" + obj.data.controllerName + "/" + obj.data.actionName
                    : obj.field == "controllerName" ? "/" + obj.data.areaName + "/" + obj.value + "/" + obj.data.actionName
                        : "/" + obj.data.areaName + "/" + obj.data.controllerName + "/" + obj.value;

                $.ajax({
                    url: "/System/Menus/UpdateMenusField",
                    data: JSON.stringify(data),
                    type: "post",
                    dataType: "Json",
                    contentType: "Application/Json",
                    success: function (d) {
                        if (d.code > 0) {
                            parent.layer.msg(d.msg, { icon: 6 });
                            obj.update({ menuUrl: menuUrl});
                        } else {
                            parent.layer.msg(d.msg, { icon: 5 });
                        }
                    },
                    error: function (e) {
                        console.log(e.responseText);
                    }
                });
            });

            // 头部工具栏点击事件
            treeTable.on('toolbar(treetb)', function (obj) {
                switch (obj.event) {
                    case "add":
                        //所有弹层方法 前加上 parent  让弹窗在父窗口
                        var index = parent.layer.open({
                            type: 1,
                            title: false,
                            area: ["440px"],
                            scrollbar: false,
                            content: $("#formp").html(),
                            success: function (layero, index) {
                                parent.form.render();
                                //添加保存
                                parent.form.on("submit(myformp)", function () {
                                    //获取表单数据 json  filter
                                    var data = parent.form.val("myformp");
                                    //console.log(data);
                                    //异步请求添加
                                    $.ajax({
                                        url: "/System/Menus/AddMenus",
                                        data: JSON.stringify(data),
                                        type: "post",
                                        dataType: "Json",
                                        contentType: "Application/Json",
                                        success: function (d) {
                                            if (d.code > 0) {
                                                parent.layer.close(index);
                                                parent.layer.msg(d.msg, { icon: 6 });
                                                insTb.refresh(); //刷新数据
                                            } else {
                                                parent.layer.msg(d.msg, { icon: 5 });
                                            }
                                        },
                                        error: function (e) {
                                            console.log(e.responseText);
                                        }
                                    });
                                    return false;
                                })
                            }
                        });
                        break;
                    case "expand":
                        if ($(obj.elem).find(".layui-icon").hasClass("layui-icon-triangle-r")) {
                            $(obj.elem).html('<i class="layui-icon layui-icon-triangle-d"></i> 折叠');
                            insTb.expandAll();
                        } else {
                            $(obj.elem).html('<i class="layui-icon layui-icon-triangle-r"></i> 展开');
                            insTb.foldAll();
                        }
                        break;
                    case "search":
                        var keywords = $('#edtSearch').val();
                        if (keywords) {
                            $(obj.elem).closest(".layui-table-tool-temp").find("button[lay-event=expand]").html('<i class="layui-icon layui-icon-triangle-d"></i> 折叠');
                            insTb.filterData(keywords);
                        } else {
                            insTb.clearFilter(); //清除搜索
                            $(obj.elem).closest(".layui-table-tool-temp").find("button[lay-event=expand]").html('<i class="layui-icon layui-icon-triangle-r"></i> 展开');
                            insTb.foldAll();
                        }
                        break;
                    default:
                }

                
            });

            // 工具列点击事件
            treeTable.on('tool(treetb)', function (obj) {
                var event = obj.event;
                switch (event) {
                    case "add":
                        //所有弹层方法 前加上 parent  让弹窗在父窗口
                        var index = parent.layer.open({
                            type: 1,
                            title: false,
                            area: ["440px"],
                            scrollbar: false,
                            content: $("#formm").html(),
                            success: function (layero, index) {
                                //parentID 赋值
                                $(layero).find("input[name=parentID]").val(obj.data.menuID);
                              
                                parent.form.render();
                                //添加保存
                                parent.form.on("submit(myformm)", function () {
                                    //获取表单数据 json  filter
                                    var data = parent.form.val("myformm");
                                    //console.log(data);
                                    //异步请求添加
                                    $.ajax({
                                        url: "/System/Menus/AddMenus",
                                        data: JSON.stringify(data),
                                        type: "post",
                                        dataType: "Json",
                                        contentType: "Application/Json",
                                        success: function (d) {
                                            if (d.code > 0) {
                                                parent.layer.close(index);
                                                parent.layer.msg(d.msg, { icon: 6 });
                                                insTb.refresh(); //刷新数据
                                            } else {
                                                parent.layer.msg(d.msg, { icon: 5 });
                                            }
                                        },
                                        error: function (e) {
                                            console.log(e.responseText);
                                        }
                                    });
                                    return false;
                                })
                            }
                        });
                        break;
                    case "editp":
                        //所有弹层方法 前加上 parent  让弹窗在父窗口
                        var index = parent.layer.open({
                            type: 1,
                            title: false,
                            area: ["440px"],
                            scrollbar: false,
                            content: $("#formp").html(),
                            success: function (layero, index) {
                                //console.log(obj.data);
                                var formdata = obj.data;
                                //parent.form.val("myformp", obj.data);
                                //自己写的表单赋值  layui 的 form 赋值 弹窗父窗口时不行
                                $(layero).find("form [name]").each(function () {
                                    $(this).val(formdata[$(this).attr("name")]);
                                });
                                parent.form.render();
                                //添加保存
                                parent.form.on("submit(myformp)", function () {
                                    //获取表单数据 json  filter
                                    var data = parent.form.val("myformp");
                                    //console.log(data);
                                    //异步请求添加
                                    $.ajax({
                                        url: "/System/Menus/UpdateMenus",
                                        data: JSON.stringify(data),
                                        type: "post",
                                        dataType: "Json",
                                        contentType: "Application/Json",
                                        success: function (d) {
                                            if (d.code > 0) {
                                                parent.layer.close(index);
                                                parent.layer.msg(d.msg, { icon: 6 });
                                                //insTb.refresh(); //刷新数据
                                                obj.update(data);
                                            } else {
                                                parent.layer.msg(d.msg, { icon: 5 });
                                            }
                                        },
                                        error: function (e) {
                                            console.log(e.responseText);
                                        }
                                    });
                                    return false;
                                })
                            }
                        });
                        break;
                    case "edit":
                        //所有弹层方法 前加上 parent  让弹窗在父窗口
                        var index = parent.layer.open({
                            type: 1,
                            title: false,
                            area: ["440px"],
                            scrollbar: false,
                            content: $("#formm").html(),
                            success: function (layero, index) {
                                //console.log(obj.data);
                                var formdata = obj.data;
                                //parent.form.val("myformm", obj.data);
                                //自己写的表单赋值  layui 的 form 赋值 弹窗父窗口时不行
                                $(layero).find("form [name]").each(function () {
                                    $(this).val(formdata[$(this).attr("name")]);
                                });
                                parent.form.render();
                                //添加保存
                                parent.form.on("submit(myformm)", function () {
                                    //获取表单数据 json  filter
                                    var data = parent.form.val("myformm");
                                    //console.log(data);
                                    //异步请求添加
                                    $.ajax({
                                        url: "/System/Menus/UpdateMenus",
                                        data: JSON.stringify(data),
                                        type: "post",
                                        dataType: "Json",
                                        contentType: "Application/Json",
                                        success: function (d) {
                                            if (d.code > 0) {
                                                parent.layer.close(index);
                                                parent.layer.msg(d.msg, { icon: 6 });
                                                //insTb.refresh(); //刷新数据
                                                obj.update(data);
                                            } else {
                                                parent.layer.msg(d.msg, { icon: 5 });
                                            }
                                        },
                                        error: function (e) {
                                            console.log(e.responseText);
                                        }
                                    });
                                    return false;
                                })
                            }
                        });
                        break;
                    case "del":
                        parent.layer.confirm("确认删除'" + obj.data.menuName + "'?", { icon: 3 }, function (index) {
                            $.ajax({
                                url: "/System/Menus/DeleteMenus",
                                type: "post",
                                data: JSON.stringify({ "id": obj.data.menuID }),
                                dataType: "Json",
                                contentType: "Application/Json",
                                success: function (data) {
                                    //console.log(data);
                                    if (data.code > 0) {
                                        parent.layer.msg(data.msg, { icon: 6 });
                                        obj.del();
                                        //insTb.refresh(); //刷新数据
                                    } else {
                                        parent.layer.msg(data.msg, { icon: 5 });
                                    }
                                }
                                , error: function (e) {
                                    console.log(e);
                                }
                            })
                        });
                        //obj.del();
                        break;
                    default:
                }
            });

        });
    </script>
</body>
</html>
<script type="text/template" id="formp">
    <form class="layui-form layui-form-pane" lay-filter="myformp" style="width:400px; margin:20px;">
        <input type="hidden" name="menuID" value=0 />
        <input type="hidden" name="parentID" value=0 />
        <!--文本框-->
        <div class="layui-form-item">
            <label class="layui-form-label">模块名称</label>
            <div class="layui-input-block">
                <input type="text" name="menuName" class="layui-input" required lay-verify="required" placeholder="请输入名称" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模块路径</label>
            <div class="layui-input-block">
                <input type="text" name="menuUrl" class="layui-input" required lay-verify="required" placeholder="请输入路径" value="\" />
            </div>
        </div>
        <!--按钮-->
        <div class="layui-btn-container">
            <input type="submit" class="layui-btn layui-btn-fluid" lay-submit value="立即提交" />
        </div>
    </form>
</script>
<script type="text/template" id="formm">
    <form class="layui-form layui-form-pane" lay-filter="myformm" style="width:400px; margin:20px;">
        <input type="hidden" name="menuID" value=0 />
        <input type="hidden" name="parentID" value=0 />
        <!--文本框-->
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="menuName" class="layui-input" required lay-verify="required|menuName" placeholder="请输入名称" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单路径</label>
            <div class="layui-input-block">
                <input type="text" name="menuUrl" class="layui-input layui-disabled" disabled required lay-verify="required" value="/areaName/controllerName/actionName" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">区域名称</label>
            <div class="layui-input-block">
                <input type="text" name="areaName"  
                       onchange="$('input[name=menuUrl]').val('/'+ $('input[name=areaName]').val() +'/'+ $('input[name=controllerName]').val()+'/'+ $('input[name=actionName]').val())"   
                       onkeypress="$('input[name=menuUrl]').val('/'+ $('input[name=areaName]').val() +'/'+ $('input[name=controllerName]').val()+'/'+ $('input[name=actionName]').val())"  
                       class="layui-input" required lay-verify="required|urlname" placeholder="请输入名称" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">控制器名称</label>
            <div class="layui-input-block">
                <input type="text" name="controllerName" 
                       onchange="$('input[name=menuUrl]').val('/'+ $('input[name=areaName]').val() +'/'+ $('input[name=controllerName]').val()+'/'+ $('input[name=actionName]').val())"   
                       onkeypress="$('input[name=menuUrl]').val('/'+ $('input[name=areaName]').val() +'/'+ $('input[name=controllerName]').val()+'/'+ $('input[name=actionName]').val())" 
                       class="layui-input" required lay-verify="required|urlname" placeholder="请输入名称" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">方法名称</label>
            <div class="layui-input-block">
                <input type="text" name="actionName" 
                       onchange="$('input[name=menuUrl]').val('/'+ $('input[name=areaName]').val() +'/'+ $('input[name=controllerName]').val()+'/'+ $('input[name=actionName]').val())"   
                       onkeypress="$('input[name=menuUrl]').val('/'+ $('input[name=areaName]').val() +'/'+ $('input[name=controllerName]').val()+'/'+ $('input[name=actionName]').val())" 
                       class="layui-input" required lay-verify="required|urlname" placeholder="请输入名称" />
            </div>
        </div>
        <!--按钮-->
        <div class="layui-btn-container">
            <input type="submit" class="layui-btn layui-btn-fluid" lay-submit value="立即提交" />
        </div>
    </form>
</script>
<script type="text/template" id="mytoolbar">
    <div class="layui-table-tool-temp">
        <button lay-event="expand" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon layui-icon-triangle-r"></i>
            展开
        </button>
        <button lay-event="add" class="layui-btn layui-btn-sm">
            <i class="layui-icon layui-icon-addition"></i>
            添加模块
        </button>
        <div class="layui-inline" style="width:220px;">
            <div class="input-group">
                <input type="text" id="edtSearch" class="layui-input input-sm" placeholder="请输入查询关键字">
                <div class="input-group-btn" lay-event="search">
                    <button class="layui-btn layui-btn-sm layui-btn-primary">
                        查询
                    </button>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="mytm">
    {{# if(d.parentID==0){}}
    <input type="button" lay-event="add" class="layui-btn layui-btn-xs" value="添加" />
    <input type="button" lay-event="editp" class="layui-btn layui-btn-xs layui-btn-warm" value="修改" />
    {{# }}}
    {{# if(d.parentID>0){}}
    <input type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-warm" value="修改" />
    {{# }}}
    <input type="button" lay-event="del" class="layui-btn layui-btn-xs layui-btn-danger" value="删除" />
</script>
